<template>
	<view class="container">
		<header-view type="second" leftShow>{{$t('注册会员')}}</header-view>
		<view class="content">
			<view class="form_item">
				<view class="title">{{$t('账号')}}</view>
				<u--input :placeholder="$t('请输入账号')" border="none" v-model="account" fontSize="18px" color="#fff"
					placeholderStyle="color:#ccc" type="number"></u--input>
				<view class="tips">{{$t('示例: 手机号码')}}09770000</view>
			</view>
			<view class="form_item">
				<view class="title">{{$t('设置密码')}}</view>
				<u--input :placeholder="$t('请输入密码')" border="none" v-model="password" fontSize="18px" color="#fff"
					placeholderStyle="color:#ccc" type="password"></u--input>
				<view class="tips">{{$t('请输入英文大小写字母或数字')}}</view>
			</view>
			<view class="form_item">
				<view class="title">{{$t('再次输入')}}</view>
				<u--input :placeholder="$t('请输入密码')" border="none" v-model="newPassword" fontSize="18px" color="#fff"
					placeholderStyle="color:#ccc" type="password"></u--input>
				<view class="tips">{{$t('再次输入设置的密码')}}</view>
			</view>
			<view class="form_item">
				<view class="title">{{$t('安全密码')}}</view>
				<u--input :placeholder="$t('请输入安全密码')" border="none" v-model="security_password" fontSize="18px"
					color="#fff" placeholderStyle="color:#ccc" type="password" maxLangth="6"></u--input>
				<view class="tips">{{$t('请输入6位数字的交易密码')}}</view>
			</view>
			<view class="form_item">
				<view class="title">{{$t('邀请码')}}</view>
				<u--input :placeholder="$t('请输入邀请码')" border="none" v-model="code" fontSize="18px" color="#fff"
					placeholderStyle="color:#ccc"></u--input>
				<view class="tips">{{$t('示例:')}} 13123</view>
			</view>
		</view>
		<u-button class="bottom" :text="$t('注册')" @tap="register"></u-button>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		registerApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				account: "",
				password: "",
				newPassword: "",
				code: "",
				security_password: ''
			};
		},
		methods: {
			register() {
				if (this.account == "") {
					uni.$u.toast(this.$t('账号不能为空'))
					return
				}
				if (this.password == "") {
					uni.$u.toast(this.$t('密码不能为空'))
					return
				}
				if (this.password != this.newPassword) {
					uni.$u.toast(this.$t('两次密码输入必须一致'))
					return
				}
				if (this.security_password == "") {
					uni.$u.toast(this.$t('安全密码不能为空'))
					return
				}
				let data = {
					user: this.account,
					password: this.password,
					code: this.code,
					security_password: this.security_password
				}
				registerApi(data).then(res => {
					console.log(res.data)
					uni.setStorageSync("token", res.data.data.token)
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						success: () => {
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/home/home"
								})
							}, 500)
						}
					})
				})

				/* uni.switchTab({
					url: "/pages/home/home"
				}) */
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding-bottom: 0;

		/deep/.second_header {
			height: 110rpx;
			background: #191c48;
			padding: 0 20rpx;
		}

		.content {
			flex: 1;
			padding: 30rpx;
			overflow: auto;

			.form_item {
				margin-bottom: 40rpx;
				width: 100%;


				.title {
					line-height: 80rpx;
					font-size: 36rpx;
					color: #ccc;
				}

				.u-input {
					width: 100%;
					height: 100rpx;
					border-bottom: 2rpx solid #666;
				}

				.tips {
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 26rpx;
					color: #ccc;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			background: #4c3d89;
			border-radius: 0;
			border: none;

			/deep/.u-button__text {
				font-size: 36rpx !important;
			}
		}

	}
</style>